<template>
  <div ref="chartRef" :style="{height:height,border:'1px solid black'}"></div>
</template>

<script>
import resize from './mixins/resize'
export default {
  mixins: [resize],
  name: 'TemperatureChart',
  data(){
    return {
        chart:null
    }
  },

  props: {

    isLabelFormat: {
      type: Boolean,
      default: false
    },
    isRotate: {
      type: Boolean,
      default: false
    },
    height: {
      type: String,
      default: '300px'
    },
    barTitle: {
      type: String,
      default: ''
    },
    fontSize: {
      type: Number,
      default: 13
    },
    xData: {
      type: Array,
      required: true
    },
    yData: {
      type: Array,
      required: true
    },
    unit: {
      type: String,
      default: '°C'
    }
  },
  mounted(){
    this.$nextTick(()=>{
        this.initChart();
    })
  },
  watch: {
  xData: {
    handler: 'updateChart',
    deep: true,
    immediate: true,
  },
  yData: {
    handler: 'updateChart',
    deep: true,
    immediate: true,
  },
  unit: 'updateChart'
  },

  computed: {
    chartOption() {
      return {
        grid: {
          left: '10%',
          right: '15%',  // 增加右边距
          top: '20%',
          bottom: '5%',  // 增加底部间距，为标签留出更多空间

          containLabel: true
        },
        // backgroundColor: "#A9AAAC",
        title: {
          text: this.barTitle,
          left: "center",
          textStyle: {
            fontSize: 18
          }
        },
        legend: { bottom: "-15px" },
        tooltip: {
          trigger: 'item',
        },
        color: ['#006FFF'],
        xAxis: [{
          name: "1s更新",
          nameTextStyle: {
            fontSize: 9
          },
          type: 'category',
          axisLabel: {
            rotate: 0,
            fontSize: this.fontSize,
            margin: 10,
            color: 'black',
            formatter: this.formatAxisLabel,
            interval: 0,
            lineHeight: 16,
            align: 'center',
            width: 80,
            overflow: 'break',
            padding: [1, 15, 5, 15],
          },
          axisTick: {
            show: true,
            inside: true,
            length: 1,
            lineStyle: {
              width: 1,
              type: 'solid'
            }
          },
          axisLine: {
            symbol: ['none', 'arrow'],
            symbolSize: [8, 8],
            symbolOffset: [0, 7],
            inside: true,
            onZero: false,
            lineStyle: {
              color: 'blue',  // 添加x轴的颜色

              width: 1,
              type: 'solid'
            }
          },
          data: this.xData
        }],
        yAxis: {
          name: this.unit,
          type: 'value',
          axisLine: {
            show: true,
            symbol: ['none', 'arrow'],
            symbolSize: [8, 8],
            symbolOffset: [0, 7],
            lineStyle: {
              color: 'blue',
              width: 1,
              type: 'solid'
            }
          },
          axisLabel: {
            fontSize: 8,
            show: true,
            inside: false,
            rotate: 0,
            margin: 5,
            color: 'red',
          },
          axisTick: {
            show: true,
            inside: true,
            length: 6,
            lineStyle: {
              width: 1,
              type: 'solid'
            }
          },
          splitLine: {
            show: false,
          },
          splitArea: {
            show: false
          }
        },
        series: [{
          type: 'bar',
          barMaxWidth: 20,
          data: this.yData,
        }]
      }
    }
  },
  methods: {
    updateChart() {
      if (this.chart) {
      // 确保数据格式正确
      const option = {
        ...this.chartOption,
        series: [{
          type: 'bar',
          barMaxWidth: 20,
          data: Array.isArray(this.yData) ?  this.yData[0]?.data || []:[]
        }]
      };
      console.log(option)
      
      // 使用setOption的第二个参数为true，强制更新
      this.chart.setOption(option, true);
      // 更新后重新调整大小
      this.chart.resize();
    }
    },
    initChart(){
      if (!this.chart) {
      this.chart = this.$echarts.init(this.$refs.chartRef);
    }
    this.updateChart();
    },
      formatAxisLabel(val) {
        if (!this.isLabelFormat) return val;

    // 每2个字符进行换行，减少每行字数
    let result = '';
    const limitNumber = 3;  // 改为每行2个字

    for (let i = 0; i < val.length; i += limitNumber) {
      if (i > 0) result += '\n';
      result += val.slice(i, i + limitNumber);
    }

    return result;
  }
    }
}
</script>
